<template>
  <div>
    <el-form-item label="接口配置">
      <div class="setting-btns">
        <el-button type="primary" link @click="openUploadSetting">文件上传接口</el-button>
      </div>
    </el-form-item>
    <el-form-item label="单文件上传">
      <el-switch v-model="localData.singleFile" />
    </el-form-item>
    <el-form-item label="文件分块大小">
      <el-input-number v-model="localData.chunkSize" controls-position="right" placeholder="请输入文件分块大小" />
    </el-form-item>
    <el-form-item label="并发上传数">
      <el-input-number v-model="localData.simultaneousUploads" controls-position="right" />
    </el-form-item>
    <el-form-item label="上传文件参数名" label-width="120">
      <el-input v-model="localData.fileParameterName" placeholder="默认为file,请输入上传时文件参数名" />
    </el-form-item>
    <el-form-item label="文件名称参数名" label-width="120">
      <el-input v-model="localData.nameParameterName" placeholder="默认为filename,请输入上传时文件参数名" />
    </el-form-item>
    <el-form-item label="是否携带cookie" label-width="120">
      <el-switch v-model="localData.withCredentials" />
    </el-form-item>
    <el-form-item label="失败重传次数">
      <el-input-number v-model="localData.maxChunkRetries" controls-position="right" />
    </el-form-item>
    <el-form-item label="重试间隔">
      <el-input-number v-model="localData.chunkRetryInterval" controls-position="right" />
    </el-form-item>

    <drag-dialog title="上传接口设置" v-model="showUploadSetting" :close-on-click-modal="false">
      <custom-ajax-setting v-model="curEditUploadSetting" :options="formJson" />
      <el-form-item label="成功表单回填">
        <el-switch v-model="curEditUploadSetting.formFill" />
      </el-form-item>
      <template #footer>
        <dialog-footer @ok="uploadSettingSubmit" @cancel="uploadSettingCancel" />
      </template>
    </drag-dialog>
  </div>
</template>
  
  <script>
import customAjaxSetting from '../../../components/customAjaxSetting.vue';
import { randomString } from '@/utils/zmids';
import { cloneDeep } from 'lodash-es';

export default {
  name: 'SimpleUploaderConfig',
  components: { customAjaxSetting },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    formJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {},
      showUploadSetting: false,
      curEditUploadSetting: {},
      showDownloadSetting: false,
      curEditDownloadSetting: {},
      remoteTypeOptions: [
        {
          label: '模型接口调用',
          value: 'ajaxModel'
        },
        {
          label: '本地接口调用',
          value: 'ajaxLocal'
        }
      ]
    };
  },
  watch: {
    data: {
      handler(newVal) {
        this.localData = newVal;
      },
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  },
  methods: {
    submit(data) {
      this.localData.submitBtn = data;
    },
    openUploadSetting() {
      this.curEditUploadSetting = cloneDeep(this.localData.ajaxSetting) || {};
      this.showUploadSetting = true;
    },
    uploadSettingSubmit() {
      this.localData.ajaxSetting = this.curEditUploadSetting;
      this.uploadSettingCancel();
    },
    uploadSettingCancel() {
      this.showUploadSetting = false;
    }
  }
};
</script>
  
  <style lang="scss" scoped>
.setting-btns {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 8px;
}
</style>